<template>
  <section>
    <div class="cost-title">
      <div>{{ titleLabel }} <span>(单位：元)</span></div>
      <el-button v-if="combineId"
                 type="text"
                 style="color: #000"
                 @click="childVisible = true">合单费用</el-button>
      <el-button v-if="matchId"
                 type="text"
                 style="color: #000"
                 @click="matchVisible = true">查看合约信息 ></el-button>
    </div>
    <el-table v-if="tableColumnComputed.length"
              border
              :data="tableData">
      <template v-for="(column, index) in tableColumnComputed">
        <Column v-show="tableData.length > 0"
                :key="index+column.type"
                :input-limit="inputLimit"
                :disabled="disabled "
                :init-zero="initZero"
                :status="status"
                v-bind="{...column, ...$attrs}"
                @input="onInput" />
      </template>
    </el-table>
    <one-bill-fee-dialog v-if="childVisible"
                         :combine-id="combineId"
                         :child-visible.sync="childVisible" />
    <quote-matching-detail v-if="matchVisible"
                           :match-visible.sync="matchVisible"
                           :match-id="matchId"
                           v-bind="$attrs" />
  </section>
</template>
<script>
import Column from "./Column.vue";
import OneBillFeeDialog from "@views/finance/createAccountStatement/components/OneBillFeeDialog.vue"
import QuoteMatchingDetail from "./QuoteMatchingDetail.vue"
export default {
  name: "TransportQuote",
  components: {
    Column,
    OneBillFeeDialog,
    QuoteMatchingDetail
  },
  props: {
    title: {
      type: String,
      default: '运单报价'
    },
    // 是否是合单
    isOneBill: {
      type: Boolean,
      default: () => false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    quotationColumn: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    combineId: {
      type: Number,
      default: null
    },
    matchId: {
      type: Number,
      default: null
    },
    status: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    return {
      inputLimit: true,
      initZero: true,
      childVisible: false,
      matchVisible: false,
    };
  },
  computed: {
    titleLabel () {
      return this.title || (this.matchId ? '合约匹配明细' : (this.isOneBill ? '合单报价' : '运单报价'))
    },
    tableData () {
      return this.dataList.length > 0 ? this.dataList : [{}];
    },
    tableColumnComputed () {
      return [...this.quotationColumn]
    }
  },
  methods: {
    onInput (colData) {
      let num = 0;
      for (let key in colData) {
        if (key != "quoteTotal" && !key.includes("FeeBefore")) {
          num += Number(colData[key]);
        }
      }
      let total = Number(num).toFixed(2);
      this.$set(colData, "quoteTotal", total);
      this.$emit("onTotal", 1, total);
      this.$emit("returnData", colData);
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
  .el-button {
    font-size: 16px;
  }
}
</style>
